<template>
  <!-- 左侧 -->
  <el-row :gutter="20">
    <el-col class="left" :span="12">
      <el-card>
        <template #header>
          <div>搜索关键词</div>
        </template>
        <div class="searchCount">
          <div class="searchCount-left">
            <div>{{ "搜索用户数" }}</div>
            <div>{{ numberFormat(searchUsers) }}</div>
            <v-chart class="leftOption" :option="leftOption()"></v-chart>
          </div>
          <div class="searchCount-right">
            <div>{{ "搜索量" }}</div>
            <div>{{ numberFormat(searchCounts) }}</div>
            <v-chart class="rightOption" :option="rightOption()"></v-chart>
          </div>
        </div>
      </el-card>
    </el-col>
    <!-- 右侧 -->
    <el-col class="right" :span="12">
      <el-card>
        <template #header>
          <div>分类销售排行</div>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: "Keyword",
}
</script>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from "vue"
import { useReportDataStore } from "@/stores/reportData"
import { formatData } from "@/hooks/useFormat"
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = formatData()

// 关键字搜索
// const searchWord = computed(() => reportDataStore.reportData.searchWord)
const searchWord = computed(() => reportDataStore.reportData.searchWord)
console.log(searchWord.value)

const searchCountList = computed(() =>
  searchWord.value?.map(item => item.count)
)
const searchUserList = computed(() => searchWord.value?.map(item => item.user))
const searchWordList = computed(() => searchWord.value?.map(item => item.word))
const searchCounts = computed(() =>
  searchCountList.value?.reduce((sums, item) => sums + item, 0)
)
const searchUsers = computed(() =>
  searchUserList.value?.reduce((sums, item) => sums + item, 0)
)

// echarts折线图
const leftOption = () => {
  return {
    xAxis: {
      type: "category",
      boundaryGap: false, // 两侧不留空白
      data: searchWordList.value,
      show: false,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        name: "搜索用户数",
        type: "line",
        data: searchUserList.value,
        // 曲线平滑
        smooth: true,
        // 设置区域样式 来代替折线
        areaStyle: { color: "#d8eeff" },
        // 折线点的样式
        itemStyle: {
          opacity: 0,
        },
        // 线的样式
        lineStyle: {
          color: "#5fbbff",
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}
const rightOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留空白
      data: searchWordList.value,
      show: false,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        name: "搜索量",
        type: "line",
        data: searchCountList.value,
        // 曲线平滑
        smooth: true,
        // 设置区域样式 来代替折线
        areaStyle: { color: "#d8eeff" },
        // 折线点的样式
        itemStyle: {
          opacity: 0,
        },
        // 线的样式
        lineStyle: {
          color: "#5fbbff",
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}

// 搜索排行表格
</script>

<style lang="scss" scope>
.searchCount {
  display: flex;

  .searchCount-left {
    flex: 1;
    margin-right: 10px;
    .leftOption {
      height: 50px;
    }
  }
  .searchCount-right {
    flex: 1;
    height: 100px;

    .rightOption {
      height: 50px;
    }
  }
}
</style>
